<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const item = defineModel('item')
const handle = () => {
  //根据点击的商品进入商品详情
  router.push('/detail/' + item.value.id)
}
</script>
<template>
  <div class="box" @click="handle">
    <el-image :src="item?.picture" :fit="contain"></el-image>
    <div class="value">
      <p class="p_first">{{ item?.title }}</p>
      <p class="p_last">{{ item?.alt }}</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: 200px;
  height: 260px;
  margin: 0 10px;
  p {
    font-family: '清松';
    display: flex;
    justify-content: center;
    font-size: 14px;
  }
  .p_last {
    font-size: 10px;
  }
}
.box:hover {
  animation: scale-up-center 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@keyframes scale-up-center {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
</style>